<template>
  <el-container class="index-con">
    <el-aside :class="showclass">
      <leftnav></leftnav>
    </el-aside>
    <el-container class="main-con">
      <el-header class="index-header">
        <navcon></navcon>
      </el-header>
      <el-main clss="index-main"  >
        <el-table :data="tableData" height="450" id="pdfDom">
        <el-table-column prop="date" label="分析领域" width="140">
        </el-table-column>
        <el-table-column prop="name" label="分析方法" width="140">
        </el-table-column>
        
        <el-table-column prop="address" label="分析内容介绍" width="620">
        </el-table-column>
      </el-table>
	  <el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>

      </el-main>
    </el-container>
  </el-container>
</template>
<script>
// 导入组件
import navcon from '../../components/navcon.vue'
import leftnav from '../../components/leftnav.vue'
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
	
  name: 'index',
  data() {
     const item = {
        date: '基因组学',
        name: '全外显子',
        address: '分析流程:1.fastp软件质控处理原始下机fastq文件。2.bwa软件比对ucsc hg19.fa标准人类基因组序列文件。3.GATK标准HaplotypeCaller分析变异，使用安捷伦外显子bed S31285117_Regions.bed，包含标记重复，BQSR，VQSR，变异注释使用snpeff。'
      };
	  const item1 = {
	     date: '基因组学',
	     name: '靶向测序',
	     address: '分析方法与全外显子流程一致，需使用者上传bed区间文件'
	   };
	   const item2 = {
	      date: '基因组学',
	      name: '甲基化',
	      address: '分析流程：1.fastp进行质控。2.bowtie2比对'
	    };
		const item3 = {
		   date: '基因组学',
		   name: '重测序',
		   address: '分析方法与全外显子流程一致,扩展到全基因组'
		 };
    return {
      showclass: 'asideshow',
      showtype: false,
      tableData: [item,item1,item2,item3],
	  htmlTitle: '页面导出PDF文件名'

    }
  },
  // 注册组件
  components: {
    navcon,
    leftnav
  },
  methods: {
	  getPdf(){
		  console.log('')
		  var title = this.htmlTitle
		        html2Canvas(document.querySelector('#pdfDom'), {
		          allowTaint: true
		        }).then(function (canvas) {
		          let contentWidth = canvas.width
		          let contentHeight = canvas.height
		          let pageHeight = contentWidth / 592.28 * 841.89
		          let leftHeight = contentHeight
		          let position = 0
		          let imgWidth = 595.28
		          let imgHeight = 592.28 / contentWidth * contentHeight
		          let pageData = canvas.toDataURL('image/jpeg', 1.0)
		          let PDF = new JsPDF('', 'pt', 'a4')
		          if (leftHeight < pageHeight) {
		            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
		          } else {
		            while (leftHeight > 0) {
		              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
		              leftHeight -= pageHeight
		              position -= 841.89
		              if (leftHeight > 0) {
		                PDF.addPage()
		              }
		            }
		          }
		          PDF.save(title + '.pdf')
		        }
		        )
	  }
  },
  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow'
      } else {
        setTimeout(() => {
          this.showclass = 'aside'
        }, 300)
      }
    })
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  // beforeMount() {
  //   // 弹出登录成功
  //   this.$message({
  //     message: '登录成功',
  //     type: 'success'
  //   })
  // }
}
</script>
<style >
.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.aside {
  width: 64px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.asideshow {
  width: 240px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.index-header,
.index-main {
  padding: 0px;
  border-left: 2px solid #333;
}
</style>
